<template>
    <div>
        <mt-header class="plain">
            <mt-button icon="back" slot="left" @click="goBack">返回</mt-button>
            <mt-button slot="right" @click="goBack">取消</mt-button>
        </mt-header>

        <div class="info-container">
            <div class="option-item item-title">
                程序未打开时
            </div>
            <div class="option-item">
                <div class="x-row item-content bordered">
                    <div class="x-col-8">
                        新消息通知
                    </div>
                    <div class="x-col-4 text-right img">
                        <img :src="switchFlg.newMessage ? img.switchOpen : img.switchClose" @click="handleSwitch('newMessage')"/>
                    </div>
                </div>
            </div>
            <div class="option-item">
                <div class="x-row item-content">
                    <div class="x-col-8">
                        语音和视频通话提醒
                    </div>
                    <div class="x-col-4 text-right img">
                        <img :src="switchFlg.video ? img.switchOpen : img.switchClose" @click="handleSwitch('video')"/>
                    </div>
                </div>
            </div>
            <div class="option-item item-split">
            </div>
            <div class="option-item">
                <div class="x-row item-content">
                    <div class="x-col-8">
                        通知显示消息详情
                    </div>
                    <div class="x-col-4 text-right img">
                        <img :src="switchFlg.showDetail ? img.switchOpen : img.switchClose" @click="handleSwitch('showDetail')"/>
                    </div>
                </div>
            </div>
            <div class="option-item item-title">
                程序打开时
            </div>
            <div class="option-item">
                <div class="x-row item-content bordered">
                    <div class="x-col-8">
                        声音
                    </div>
                    <div class="x-col-4 text-right img">
                        <img :src="switchFlg.sound ? img.switchOpen : img.switchClose" @click="handleSwitch('sound')"/>
                    </div>
                </div>
            </div>
            <div class="option-item">
                <div class="x-row item-content">
                    <div class="x-col-8">
                        振动
                    </div>
                    <div class="x-col-4 text-right img">
                        <img :src="switchFlg.vibration ? img.switchOpen : img.switchClose" @click="handleSwitch('vibration')"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import switchOpenImg from '@/assets/images/personal/开关_开.png'
import switchCloseImg from '@/assets/images/personal/开关_关.png'

import { Toast } from 'mint-ui'
import { Const } from '@/consts'

export default {
    data() {
        return {
            img: {
                switchOpen: switchOpenImg,
                switchClose: switchCloseImg
            },

            switchFlg: {
                newMessage: true,
                video: false,
                showDetail: false,
                sound: true,
                vibration: false
            }
        }
    },


    methods: {
        goBack() {
            this.$router.replace('/personal/setting/')
        },

        getSwitchTypeCode(type) {
            
            let result = '';
            
            switch(type) {
                case 'newMessage':
                    // 新消息通知
                    result = '新消息通知';
                    break;
                case 'video':
                    // 语音和视频通话提醒
                    result = '语音和视频通话提醒';
                    break;
                case 'showDetail':
                    // 通知显示消息详情
                    result = '通知显示消息详情';
                    break;
                case 'sound':
                    // 声音
                    result = '声音';
                    break;
                case 'vibration':
                    // 振动
                    result = '振动';
                    break;
            }

            return result;
        },

        handleSwitch(type) {

            if (this.switchFlg[type] == null) {
                return;
            }

            this.switchFlg[type] = !this.switchFlg[type];

            let isOpen = this.switchFlg[type];
            
            Toast(this.getSwitchTypeCode(type) + ' 状态：' + (isOpen ? '开启' : '关闭'));
        }
    }
}
</script>

<style lang="scss" scoped>
$offset-x: 16px;
$scale: 1.2;
.info-container {

    .option-item {
        height: 48px;
        font-size: 14px * $scale;
        text-align: left;
        color: #333333;
        padding-left: $offset-x;
        padding-right: $offset-x;

        .item-content {
            height: 100%;
            line-height: 48px;

            .img img {
                height: 24px;
                vertical-align: middle;
            }
        }
        .bordered {
            border-bottom: 1px solid #dddddd;
        }
        
        &.item-split {
            height: 8px;
            background: #ebebeb;
        }
    }

    .item-title {
        height: 40px;
        line-height: 40px;
        background: #ebebeb;
        color: #666666;
    }

}
</style>
